@import "../../shared/modal.less";
// user login
@mark-red: #fd3d41; // 主色红
@mark-blue: #089dff;
@hover-mark-red: #fd3d41; // 主色hover
@hover-grey-daker: #666; // 灰色hover
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;opacity:1;
}

input:-ms-input-placeholder{
  color: #999;opacity:1;
}

input::-webkit-input-placeholder{
  color: #999;opacity:1;
}
.user-signup-modal {
  .modal-dialog {
    width: 500px;
    .modal-content {
      background-color: #FFF;
      border: 1px solid #E8E8E8;
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .3);
    }
    .modal-body {
      padding: 0;
      .btn-close{
        top: -30px;
        right: -30px;
      }
      .signup{
        margin-top: 50px;
        width: 500px;
        font-size: 28px;
        color: #333333;
        text-align: center;
      }
    }
  }
  .modal-body {
    // account, password
    .input-form {
      position: relative;
      margin-top: 30px;
      &:last-child {
        margin-bottom: 10px;
      }
      img {
        position: absolute;
        top: 15px;
        left: 59px;
        width: 19px;
        height: 22px;
      }
      input {
        width: 400px;
        height: 52px;
        margin: 0 50px;
        padding: 10px 10px 10px 40px;
        border: 1px solid #E8E8E8;
        border-radius: 4px;
        font-size: 16px;
        color: #979797;
        background: #FFF;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
        }
        &:focus {
          border-color: rgba(82,168,236,0.8);
          -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
          -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
        }
      }
    }
    .form-signup .otp-form {
      // send varify code
      .getSms {
        position: absolute;
        top: 10px;
        right: 62px;
        height: 26px;
        line-height: 30px;
        font-size: 16px;
        color: @mark-blue;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        &:hover,
        &:focus,
        &:active {
          border-color: #B1B1B1;
        }
      }
      .disabled {
        position: absolute;
        top: 10px;
        right: 62px;
        height: 26px;
        line-height: 30px;
        font-size: 16px;
        color: rgb(156, 156, 156);
        text-align: center;
        cursor: pointer;
      }
    }

    // forget-btn
    .form-signup .forget-form {
      margin-top: 20px;
      padding: 0px 50px;
      .agreement {
        font-family: 微软雅黑;
        font-size: 16px;
        color: #999999;
        line-height: 20px;
      }
      span{
        color: @mark-blue;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    // login and register
    .signup-form {
      margin: 50px 50px 87px 50px;
      .button-style {
        .btn.btn-primary {
          height: 48px;
          font-size: 18px;
          width: 400px;
          background-color: #fa3f43;
          color: #FFF;
          &:hover {
            background-color: #c8393c;
            color: #FFF;
          }
        }
      }
      .disabled{
        .btn.btn-primary{
          background-color: #fb7c7c;
          color: rgba(255, 255, 255, 0.8);
          &:hover {
            background-color: #fb7c7c;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
      .signup-err {
        margin-top: 5px;
        height:16px;
        text-align: left;
        font-size: 16px;
        color: @mark-red;
        white-space: nowrap;
      }
    }
    .goLogin {
      position: absolute;
      right: 50px;
      bottom: 50px;
      font-size: 18px;
      span{
        color: @mark-blue;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}